$(function () {
    // 定义一个全局变量
    let query = {
        pagenum: 1,        //是	int	页码值
        pagesize: 2,      //是 int	每页显示多少条数据
        cate_id: "",       //否	string	文章分类的 Id
        state: ""	       //否	string	文章的状态，可选值有：已发布、草稿
    }

    // 需求1: 展示文章列表
    let layer = layui.layer;
    initArticleList();
    // 封装成函数后,后面的分页/筛选/删除会用到
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: query,
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            // console.log(res.data);
            // todo:成功后渲染
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(`
                <tr>
                <td>${ele.title}</td>
                <td>${ele.cate_name}</td>
                <td>${dateFormat(ele.pub_date)}</td>
                <td>${ele.state}</td>
                <td>
                  <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">
                    编辑
                  </a>
                  <button data-id=${ele.Id} class="btn-delete layui-btn layui-btn-xs layui-btn-danger"
                  >
                    删除
                  </button>
                </td>
              </tr>
             `)
            })
            // 赋值   一定要写到foreach外面
            let str = arr.join('');
            $("tbody").empty().html(str)
            // 赋值之后,做分页
            pageRender(res.data.total)
        })
    }

    // 需求2: 初始化文章分类
    // 封装一个函数后边用
    let form = layui.form;
    initArtCateList();
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // 判断
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            // 成功获取后,渲染
            let arr = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(ele => {
                arr.push(`
                 <option value="${ele.Id}">${ele.name}</option>
                 `)
            })
            // 赋值
            let str = arr.join("");
            $("[name=cate_id]").empty().html(str);
            // form表单同步渲染
            form.render();
        })
    };


    // 需求3: 筛选
    $("#formSearch").on('submit', function (e) {
        e.preventDefault();
        // 该分类和状态两个全局参数
        query.cate_id = $('[name=cate_id]').val();
        query.state = $('[name=state]').val();

        // 重新调用文章列表初始化方法(不是文章分类列表)
        initArticleList();

    })

    // 需求4: 分页
    var laypage = layui.laypage;
    function pageRender(total) {
        // 执行一个laypage实例
        laypage.render({
            elem: 'pageBox',  //注意:这里是test1是Id  不用加#号
            count: total,   //数据总数,从服务端得到
            limit: query.pagesize,   //每页显示多少条
            curr: query.pagenum,    //当前页
            // 配置定制化的分页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                // 首次不执行
                if (!first) {
                    // do something
                    // 修改参数,重新渲染页面
                    query.pagenum = obj.curr;
                    query.pagesize = obj.limit;
                    // 重新渲染
                    initArticleList()
                }
            }
        })
    }

    // 需求5: 删除
    $("tbody").on('click', '.btn-delete', function () {
        // 在弹出层的外面获取id,弹出层里面this就改变
        let id = $(this).attr('data-id');
        // alert(id)
        // 弹出层
        layer.confirm("确认删除此文章吗?", { icon: 3, title: '提示' }, function (index) {
            // do something
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status != 0) {
                    return layer.msg(res.data.message)
                }
                // 成功提示
                layer.msg('恭喜您,删除文章成功!')
                // 如果当前页只剩一条数据,而且删除成功了,那么query.pagenum自减
                // 当前页面大于等于2, 没有第0页,第一页不能减少了
                if ($('.btn-delete').length == 1 && query.pagenum >= 2) {
                    query.pagenum--;
                }
                // 重新渲染页面
                initArticleList();
            })
            layer.close(index)
        })
    })

})